<script setup lang="ts">
import {computed} from "vue";
import {hexPoints, transform} from "@/components/hex/HexComm";
import {HexPosition} from "@/components/hex/HexContainer";

interface HexCellProps {
  radius: number; // 半径
  position: HexPosition; // 偏移 立方体坐标 xyz
  inclination?: number; // 角度
  center?: [number, number]; // 偏移[0,0,0]的块在画布中的位置 xy
  fill?: string;

  // 六边形
  showHex?: boolean; // 显示六边形
  hexFill?: string;
  hexAttrs?: any;

  // 内切圆
  showCircle?: boolean; // 显示内切圆
  circleFill?: string;
  circleAttrs?: any;

  // 文字
  text?: string;
  textAttr?: any;
}

const props = withDefaults(defineProps<HexCellProps>(), {
  inclination: 30,
  center: () => [0, 0],
  fill: "none",

  showHex: true,
  showCircle: false,
});

const translate = computed(() =>
    transform(props.position, props.center, props.radius, props.inclination)
);

const points = computed(() =>
    hexPoints(translate.value, props.radius, props.inclination)
);

const textAttrs = computed(() => {
  if (props.textAttr) {
    return props.textAttr;
  }
  return {
    'font-size': props.radius / 2,
  }
})

const emit = defineEmits<{
  click: [pos: HexPosition],
}>();

function onClick() {
  emit('click', props.position)
}

</script>

<template>
  <g @click="onClick" style="cursor: pointer;">
    <template v-if="showHex">
      <polygon
          :points="points"
          vector-effect="non-scaling-stroke"
          :fill="hexFill || fill"
          v-bind="hexAttrs"
      />
    </template>
    <template v-if="showCircle">
      <circle
          :cx="translate[0]"
          :cy="translate[1]"
          :r="radius * Math.sqrt(3) / 2"
          :fill="circleFill || fill"
          v-bind="circleAttrs"
      />
    </template>
    <template v-if="text">
      <text
          :x="translate[0]"
          :y="translate[1]"
          text-anchor="middle"
          dominant-baseline="middle"
          pointer-events="none"
          style="user-select: none;"
          v-bind="textAttrs"
      >
        {{ text }}
      </text>
    </template>
    <slot
        :position="position"
        :translate="translate"
    ></slot>
  </g>
</template>

<style scoped>

</style>